<template>
    <div   class="create_order" >
            <Header  title="生成订单"/>
            <van-contact-card type="edit" :tel="currentContact.tel" :name="currentContact.name" @click="onEdit" />

            <div  class="content">
                   <div   v-for=" i in  store.state.orderList">
                        <van-card 
                         :num="i.num" 
                         :price="i.price" 
                       
                         :title="i.title"
                         :thumb="i.pic" />
                    </div>
                
                    <div  class="pay-wrap">
                         
                         <div>
                            <span>商品金额</span>
                            <span>￥{{ allPrice }}</span>
                         </div>
                 
                         <van-button type="primary" block=""  class="pay-btn" color="#ffc400"  @click="handleCreateOrder">生成订单</van-button>

                    </div>
                   
            </div>
    </div>
</template>

<script>
import { reactive, toRefs,onMounted } from 'vue'
import  {   useStore} from 'vuex'
import Header from '../../components/Header.vue'
import { useRouter, useRoute} from 'vue-router'
import { Dialog } from 'vant'


export default {



    components: {
    Header,
  },
    setup () {
      
        const store  = useStore()
        const  router =useRouter()
        const route = useRoute()
          const data = reactive({
            currentContact:{
                name:"",
                tel:""
            },
            allPrice:0


        })


        // 1、地址编辑按钮

       const    onEdit = ()=>{
               router.push('/address')

       }
        // 2、生成订单按钮

        const  handleCreateOrder = ()=>{

          Dialog.alert({
              title: '提示',
              message: '恭喜!您的订单已完成 ',
            }).then(() => {
               

              let newList = store.state.cartList.filter((it)=>{
           // 因为query传参与 get请求传参相似，都是通过URL传递参数，并且通常会自动将数字转换为字符串(URL参数都是以字符串形式传递的) ，所以，就有了这个操作
                return  !route.query.list.includes(it.id + '') // 把 id值转换为字符串，做判断, 因此加一个 ''引号
                       

              })

              store.commit('DELETE',newList)
              store.commit('UPDATEORDER')
              router.push('/order')
            });



        }

        // 3、初始化价格

        const  initPrice = ()=>{
            let  price = 0
            if(store.state.orderList.length){
                store.state.orderList.forEach((item)=>{
                    price += item.num *  item.price;
                })

               data.allPrice = price
            }
        }

        // 4、用户信息初始化
         const  initUser = ()=>{


          store.state.userAddress.forEach((it)=>{


            if( it.isDefault){
                data.currentContact.name = it.name
                data.currentContact.tel = it.tel
            }

          })
         }

        onMounted(() => {
            initPrice()
            initUser()
        })
       
        
        return {
            ...toRefs(data),
            onEdit,
            store,
            handleCreateOrder
            
        }
    }
}
</script>

<style lang="less" scoped>
.create_order {
  display: flex;
  flex-flow: column;
  height: 100%;
  .content {
    flex: 1;
    overflow-y: auto;
  }
  .pay-wrap {
    padding: 10px 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #e9e9e9;
    > div {
      display: flex;
      justify-content: space-between;
      padding: 0 5%;
      margin: 10px 0;
      font-size: 14px;
      span:nth-child(2) {
        color: red;
        font-size: 18px;
      }
    }
    .pay-btn {
      width: 90%;
      margin: 0 auto;
    }
  }
}
</style>